<template>
  <div>
    <!--    <template v-for="data in customData">-->
    <!--      <div v-if="data.type==='input'" class="tmp">-->
    <!--        {{data.label}}<input v-model="object[data.model]">-->
    <!--      </div>-->
    <!--    </template>-->
    <!--    <div style="display: flex;width: 100px">-->
    <!--      <div v-for="data in customData">-->
    <!--        <button v-if="data.type==='button'"-->
    <!--                @click="clickButton(data.eventType)"-->
    <!--                style="min-width: 50px;margin-top: 10px">{{data.label}}-->
    <!--        </button>-->
    <!--      </div>-->
    <!--    </div>-->

    <div v-if="judgeHasInput">
      <div v-for="customInput in customTypes.input">
        {{customInput.label}}<input v-model="inputModel[customInput.model]">
      </div>
    </div>

    <div v-if="judgeHasButton">
      <div v-for="customButton in customTypes.button">
        <button @click="clickButton(customButton)">
          {{customButton.label}}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  import {EventBus} from '../../event-bus'
  import {get, groupBy} from 'lodash'


  export default {
    name: "custom-button",
    components: {},
    model: {},
    props: {
      customData: {
        type: Array
      }
    },
    data() {
      return {
        inputModel: {},
        customTypes: {}
      }
    },
    computed: {
      judgeHasInput: function () {
        return get(this.customTypes, 'input') && this.customTypes.input.length
      },
      judgeHasButton: function () {
        return get(this.customTypes, 'button') && this.customTypes.button.length
      }
    },
    created: function () {
      this.initCustomType()
      this.initData()
    },
    methods: {
      initCustomType() {
        this.customTypes = Object.assign({}, this.customTypes, groupBy(this.customData, 'type'))
      },
      initData() {
        // for (let tmp of this.customData) {
        //   if (get(tmp, 'type') && tmp.type === 'input') {
        //     this.$set(this.inputModel, tmp.model, '')
        //   }
        // }
        if (get(this.customTypes, 'input') && this.customTypes.input.length) {
          this.customTypes.input.forEach((customInput) => {
            if (!get(customInput, 'model')) {//生产环境可以删除，开发阶段用来验证
              throw new Error(JSON.stringify(customInput) + '未绑定model!')
            }
            this.$set(this.inputModel, customInput.model, '')
          })
        }
      },
      clickButton(customButton) {
        //this 指的是当前的el的所有属性
        customButton.eventAction.call(this)
        // EventBus.$emit('ButtonClick', Object.assign(this.inputModel, {customButton}));
      }
    }
  }
</script>
